<template>
	<view class="h100">
		<scroll-view class="h100" scroll-y :refresher-enabled="enabled" :refresher-triggered="triggered"
			:refresher-threshold="threshold" :refresher-background="bgColor" @scroll="onScroll"
			@scrolltoupper="onScroll" @scrolltolower="onScroll" @refresherpulling="onScroll"
			@refresherrefresh="onScroll" @refresherrestore="onScroll" @refresherabort="onScroll">
			<slot></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "scroll",
		props: {
			load: {
				type: Object,
				default: {}
			},
			threshold: {
				type: Number,
				default: 100
			},
			swiperCurrent: {
				type: Number,
				default: 0
			},
			triggered: Boolean,
			enabled: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			map: {
				type: Object,
				default: () => {
					return {
						page: "page",
						pageSize: "pageSize",
						total: "total",
					}
				}
			},
			index: Number
		},
		// watch: {
		// 	'triggered': {
		// 		immediate: true,
		// 		deep: true,
		// 		handler(val) {
		// 		}
		// 	}
		// },
		methods: {
			onScroll(e, emitName = null) {
				let {
					type,
					detail
				} = e
				let that = this
				let page = that.load[that.map.page] ? that.load[that.map.page] : 1
				let pageSize = that.load[that.map.pageSize] ? that.load[that.map.pageSize] : 10
				let total = that.load[that.map.total] ? that.load[that.map.total] : 0
				let status = (page * pageSize >= total) ? false : true
				let more = status
				let moreText = status ? '还没加载完，继续努力~' : '没有更多数据了~'
				switch (type) {
					case 'scrolltoupper':
						emitName = 'to-upper'
						break
					case 'scrolltolower':
						emitName = 'to-lower'
						break
					case 'scroll':
						emitName = 'scrolling'
						break
					case 'refresherpulling':
						emitName = 'pulling'
						break
					case 'refresherrefresh':
						emitName = 'refresh'
						break
					case 'refresherrestore':
						emitName = 'restore'
						break
					case 'refresherabort':
						emitName = 'abort'
						break
				}
				that.$nextTick(_ => {
					that.$emit('scrollHandle', {
						type: emitName,
						more,
						moreText,
						detail: detail,
						index: that.index
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.h100 {
		height: 100%;
	}
</style>